import React from "react";
import { Card, CardProps } from 'antd';
import { createStyles, css } from "antd-style"

import {ProAutoScrollbars} from "../pro-autoScrollbars";

export interface ProCardProps extends CardProps { }

export const ProCard: React.FC<ProCardProps> = ({ children, title, size = "small", ...props }) => {
  const { styles } = useStyles({title, size});

  return <Card
    className={`${styles.proCard} ${props.className}`}
    size="small"
    title={title}
    {...props}
  >
    <ProAutoScrollbars>
      {children}
    </ProAutoScrollbars>
  </Card>
}


const useStyles = createStyles(({ }, props: { size: "default" | "small", title: React.ReactNode }) => {
  const { size, title } = props;
  return {
    proCard: css`
      height:100%;
      
      .ant-card-body{
        height: calc(100% - ${size != "small" ? (title ? 55 : 0) : (title ? 38 : 0)}px);
        padding: 5px;
      }

    `
  }
})

